<template>
  <div v-loading="loading">
    <div class="cbody">
      <div class="top">
        <div :class="dayChange == 0 ? 'hac' : ''" @click="setDays(0)">全部</div>
        <div :class="dayChange == 1 ? 'hac' : ''" @click="setDays(1)">今日</div>
        <div :class="dayChange == 2 ? 'hac' : ''" @click="setDays(2)">近7天</div>
        <div :class="dayChange == 3 ? 'hac' : ''" @click="setDays(3)">近30天</div>
      </div>
      <div class="info">
        <div class="head">
          <div class="con">
            <div class="word">
              <div class="count">￥{{money.pt.toFixed(2)}}</div>
            <div class="name">平台营业额</div>
            </div>
            <img src="./../../images/main/01.png" alt="">
          </div>
          <div class="con">
             <div class="word">
            <div class="count">￥{{money.hh.toFixed(2)}}</div>
            <div class="name">合伙人收入</div>
             </div>
            <img src="./../../images/main/02.png" alt="">
          </div>
          <div class="con" >
             <div class="word">
            <div class="count">￥{{money.fw.toFixed(2)}}</div>
            <div class="name">服务商收入</div>
             </div>
            <img src="./../../images/main/03.png" alt="">
          </div>
          <div class="con">
             <div class="word">
            <div class="count">￥{{money.yj.toFixed(2)}}</div>
            <div class="name">平台佣金</div>
             </div>
            <img src="./../../images/main/04.png" alt="">
          </div>
        </div>
        <div class="titles">查询</div>
        <div class="sel">
          <span class="txt">名称</span>
          <input type="text" placeholder="服务商名称/合伙人" v-model="params.keyWord">
          <span class="txt">当前状态</span>
          <select name v-model="params.states">
            <option value="-1">请选择</option>
            <option value="0">待审核</option>
            <option value="1">待打款</option>
            <option value="2">已打款</option>
            <option value="3">已驳回</option>
          </select>
          <div class="sel-btn" @click="getFinList">查询</div>
        </div>
        <!--  <div class="tabs">
            <div class="tabac">合伙人</div>
            <div @click="error()">服务商</div>
        </div>-->
        <div class="tabs">
          <!-- <div class="tabac">合伙人</div>
          <div>服务商</div>-->
          <div
            v-for="( item, index ) in type.tab"
            :key="item.value"
            @click="tabClick( item )"
            :class="item.selected ? 'tabac' : ''"
          >{{ item.label }}</div>
        </div>
        <el-table :data="info.withDrawalList" stripe style="width: 100%">
          <el-table-column align="center" prop="account_name" label="名称" width="180"></el-table-column>
          <el-table-column align="center" prop="name" label="银行账户信息" width="180">
            <template slot-scope="scope">
              <div>
                <div>{{scope.row.bank_name}}</div>
                <div v-if="params.type == 2 && scope.row.is_qi">{{scope.row.duty_paragraph}}</div>
                <div>{{scope.row.bank_account}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
          <el-table-column label="提现金额">
            <template slot-scope="scope">
              <div>{{(scope.row.price).toFixed(2)}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="申请时间">
            <template slot-scope="scope">
              <div>{{setDate(scope.row.time)}} {{setTime(scope.row.time)}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="当前状态">
            <template slot-scope="scope">
              <div>
                <div class="states" v-if="scope.row.states == 0">待审核</div>
                <div class="states" v-if="scope.row.states == 1">审核通过未打款</div>
                <div class="states" v-if="scope.row.states == 2">审核通过已打款</div>
                <div class="states" v-if="scope.row.states == 3">审核失败</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div v-if="scope.row.states == 0 && roleList.search('提现审核') != '-1'">
                <span>
                  <a @click="operation(scope.row.id,1)">通过审核</a> |
                  <a @click="operation(scope.row.id,3)">驳回</a>
                </span>
              </div>
              <div v-if="scope.row.states == 1  && roleList.search('打款完成') != '-1'">
                <a @click="operation(scope.row.id,2)">打款完成</a>
              </div>

              <div v-if="scope.row.states == 3">
                <span>驳回原因：当前服务商/合伙人有违规行为，平台暂不处理</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 50px 0; text-align: center;">
          <el-pagination
            class="el-pagination"
            background
            layout="prev, pager, next"
            :page-count="pageTotal"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      loading: false,
      type: {
        tab: [
          {
            label: "合伙人",
            value: 2,
            selected: true
          },
          {
            label: "服务商",
            value: 1,
            selected: false
          }
        ],
        current: ""
      },
      params: {
        keyWord: "",
        states: -1,
        limit: 10,
        page: 1,
        type: 2
      },
      money: {
        pt: 0,
        hh: 0,
        fw: 0,
        yj: 0
      },
      info: {
        withDrawalList: []
      },
      pageTotal: 1,
      dayChange: 0,
      roleList: ""
    };
  },
  methods: {
    /**
     *  获取权限
     */
    getRole: function() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysPermission/selectByEmployeeId`,
        data: qs.stringify({
          empId: that.$cookie.get("pid")
        })
      }).then(res => {
        console.log(res);
        let arr = res.data.data;
        let role = [];
        for (let i = 0; i < arr.length; i++) {
          role.push(arr[i].name);
        }
        this.roleList = role.toString();
      });
    },
    // 分页
    changePage(argv) {
      this.params.page = argv;
      this.getFinList();
    },
    // 切换身份
    tabClick(item) {
      for (let i = 0, len = this.type.tab.length; i < len; i++) {
        let item = this.type.tab[i];
        item.selected = false;
      }
      item.selected = true;
      this.params.type = item.value;
      this.getFinList();
    },
    // 操作
    operation(id, type) {
      let _this = this;
      var that = this
      if (type == 1 || type == 2) {
        this.$confirm(type == 1 ? "确认通过审核？" : "是否确认打款完成？").then(
          () => {
            axios
              .post(
                `${this.$store.state.url}/tWithdrawal/updateStates`,
                qs.stringify({
                  id: id,
                  states: type
                })
              )
              .then(response => {
                _this.$message("操作成功");
                let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:type == 1 ? '通过审核' : '确认打款完成',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
                _this.getFinList();
              });
          }
        );
      } else {
        this.$prompt("驳回原因", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }).then(({ value }) => {
          axios
            .post(
              `${this.$store.state.url}/tWithdrawal/updateStates`,
              qs.stringify({
                id: id,
                states: type,
                reason: value
              })
            )
            .then(response => {
              _this.$message("操作成功");
              _this.getFinList();
              let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'驳回提现请求',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
            });
        });
      }
    },
    /**
     * 审核
     */
    examine: function(id, num) {
      this.loading = true;
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/tWithdrawal/updateStates`,
        data: qs.stringify({
          id: id,
          states: num
        })
      }).then(
        res => {
          this.loading = false;
          if (res.data.code == 0) {
            that.getFinList();
          } else {
            alert(res.data.msg);
          }
        },
        () => {
          this.loading = false;
        }
      );
    },
    /**
     *  设置天数
     */
    setDays: function(num) {
      let that = this;
      that.dayChange = num;
      switch (num) {
        case 0:
          that.money = {
            pt: that.info.totalPrice,
            hh: that.info.partnerTotalPrice,
            fw: that.info.serviceTotalPrice,
            yj: that.info.backstageTotalPrice
          };
          break;
        case 1:
          that.money = {
            pt: that.info.totalTodayPrice,
            hh: that.info.partnerTodayTotalPrice,
            fw: that.info.serviceTodayTotalPrice,
            yj: that.info.backstageTodayTotalPrice
          };
          break;
        case 2:
          that.money = {
            pt: that.info.totalWeekPrice,
            hh: that.info.partnerWeekTotalPrice,
            fw: that.info.serviceWeekTotalPrice,
            yj: that.info.backstageWeekTotalPrice
          };
          break;
        case 3:
          that.money = {
            pt: that.info.totalMonPrice,
            hh: that.info.partnerMonTotalPrice,
            fw: that.info.serviceMonTotalPrice,
            yj: that.info.backstageMonTotalPrice
          };
          break;
      }
      console.log(that.money);
    },
    /**
     *  查询财务列表
     */
    getFinList: function(num) {
      this.loading = true;
      let that = this;
      this.info = {};
      axios({
        method: "post",
        url: `${that.$store.state.url}/tWithdrawal/selectDrawal`,
        data: qs.stringify(that.params)
      }).then(
        res => {
          this.loading = false;
          if (res.data.code == 0) {
            that.info = res.data.data;
            this.pageTotal = Math.ceil(res.data.count / 10);
            that.setDays(that.dayChange);
          } else {
            that.$alert(res.data.msg);
          }
        },
        () => {
          this.loading = false;
        }
      );
    },
    /*
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getFinList();
    this.getRole();
  }
};
</script>
<style scoped>
.word {
  width: 55%;
  float: left;
}
.show-menu {
  color: rgba(75, 116, 255, 1);
  cursor: pointer;
}
.menu-list div {
  margin: 5px;
  float: left;
  box-sizing: border-box;
  width: 40%;
}
.titles {
  height: 62px;
  line-height: 62px;
  color: #778ca2ff;
  font-size: 14px;
  width: 100%;
  display: inline-block;
}
.sel {
  height: 32px;
  line-height: 32px;
  padding: 23px 20px;
  background: #fff;
}
.sel .txt {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: rgba(37, 38, 49, 1);
  font-weight: bold;
}
.sel input {
  width: 232px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(152, 169, 188, 1);
}
.sel-btn {
  color: #fff;
  width: 80px;
  height: 32px;
  background: rgba(75, 116, 255, 1);
  border-radius: 24px;
  border: 1px solid rgba(75, 116, 255, 1);
  text-align: center;
  margin-left: 37px;
  display: inline-block;
  cursor: pointer;
}
.sel select {
  width: 232px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(152, 169, 188, 1);
  margin-left: 17px;
  padding-left: 20px;
}
.top {
  /* margin-top: 7px; */
  height: 40px;
  text-align: center;
  width: 440px;
  color: #778ca2;
  border-radius: 4px;
  display: flex;
  box-sizing: border-box;
}
.top > div {
  flex: 1;
  /* height: 40px; */
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-sizing: border-box;
}
.top :first-child {
  border: 0;
}
.top .hac {
  color: #4d7cfe;
  border-bottom: 2px solid #4d7cfe;
}
.head {
  margin-top: 20px;
  display: flex;
  width: 1050px;
}
.head > div {
  flex: 1;
  height: 98px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  display: inline-block;
  margin: 0 10px;
}

.name {
  font-size: 14px;
  color: #252631;
  height: 24px;
  text-align: center;
}
.count {
  height: 50px;
  font-size: 22px;
  color: #4b74ff;
  text-align: center;
  line-height: 50px;
  margin-top: 10px;

}
.con img {
  float:right;
  width: 25%;
  margin-top: 20px;
  margin-right: 10%;
}
.tabs {
  width: 120px;
  height: 40px;
  display: flex;
  font-size: 14px;
  padding: 10px;
}
.tabs > div {
  flex: 1;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  color: #778ca2;
}
.tabs:first-child {
  border-right: 1px solid #ddd;
}
.tabs .tabac {
  border-bottom: 2px solid rgba(75, 116, 255, 1);
  color: #4d7cfe;
}
</style>


